import { Button, InputNumber } from 'antd';
import { useForm } from 'antd/lib/form/Form';
// import SForm from './nbForm';
import { NbFormScheme } from './interface';
import { NbInputWidgetScheme } from './widgets/input/scheme';
import { NbInputNumberWidgetScheme } from './widgets/inputNumber/scheme';
import { NbRadioWidgetScheme } from './widgets/radioGroup/scheme';
import { NbSelectWidgetScheme } from './widgets/select/scheme';
import { NbSwitchWidgetScheme } from './widgets/switch/scheme';
import NbForm from '@/pages/form/NbForm';

export default function Page() {
  const [form] = useForm();
  const scheme: NbFormScheme = {
    name: 'user',
    autoComplete: 'off',
    preserve: true,
    size: 'middle',
    layout: 'horizontal',
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
    properties: {
      name: {
        label: '姓名',
        order: 1,
        props: { placeholder: '请输入你的姓名' } as NbInputWidgetScheme,
        required: true,
      },
      age: {
        label: '年龄',
        widget: 'inputNumber',
        order: 2,
        props: {
          placeholder: '请输入你的年龄',
          min: 0,
        } as NbInputNumberWidgetScheme,
        // watchItemProps: {
        //   sex: (value: number) => {
        //     if (value === 1) {
        //       return { required: true };
        //     }
        //     return { required: false };
        //   },
        // },
      },
      sex: {
        widget: 'radioGroup',
        label: '性别',
        initialValue: 1,
        props: {
          options: [
            { value: 1, label: '男' },
            { value: 0, label: '女' },
          ],
        } as NbRadioWidgetScheme,
      },
      address: {
        label: '出生地',
        widget: 'select',
        props: {
          allowClear: true,
          placeholder: '请选择地址',
          options: [
            { value: 'china', label: '中国' },
            { value: 'other', label: '其他' },
          ],
        } as NbSelectWidgetScheme,
      },
      canMove: {
        label: '是否会爬',
        widget: 'switch',
        initialValue: true,
        valuePropName: 'checked',
        props: {
          checkedChildren: '是',
          unCheckedChildren: '否',
        } as NbSwitchWidgetScheme,
      },
      house: {
        widget: 'object',
        properties: {
          name: {
            label: '房屋地址',
          },
          size: {
            label: '房屋大小',
            widget: 'inputNumber',
          },
        },
      },
      car: {
        widget: 'object',
        properties: {
          name: {
            label: '车子品牌',
          },
          price: {
            label: '车子价格',
            widget: 'inputNumber',
          },
          weight: {
            label: '车子重量',
            render: (props) => {
              const { value, onChange } = props;
              return <InputNumber value={value} onChange={onChange} />;
            },
          },
        },
      },
    },
  };

  function submit() {
    console.log(form.getFieldsValue());

    form.validateFields().then((values) => {
      console.log(form.getFieldsValue());
    });
  }

  return (
    <div>
      <NbForm form={form} scheme={scheme} />
      <Button onClick={submit}>ok</Button>
    </div>
  );
}
